<template>
  <view class="page">
    <ad-popup
      :visible="showAdPopup"
      @close="closeAdPopup"
      @ad-click="handleAdClick"
    ></ad-popup>
    <top-banner />
    <view class="content">
      <customer-banner />
      <center-banner />
      <medal-banner />
      <hot-banner />
      <bottom-banner />
    </view>
  </view>
</template>

<script>
import AdPopup from "./components/ad_popup.vue"
import TopBanner from "./components/TopBanner/TopBanner.vue"
import CustomerBanner from "./components/CustomerBanner/CustomerBanner.vue"
import CenterBanner from "./components/CenterBanner/CenterBanner.vue"
import MedalBanner from "./components/MedalBanner/MedalBanner.vue"
import HotBanner from "./components/HotBanner/HotBanner.vue"
import BottomBanner from "./components/BottomBanner/BottomBanner.vue"
export default {
  name: "index",
  components: {
    AdPopup,
    TopBanner,
    CustomerBanner,
    CenterBanner,
    MedalBanner,
    HotBanner,
    BottomBanner
  },
  data() {
    return {
      showAdPopup: false
    }
  },
  onLoad() {
    this.showAdPopup = true
  },
  methods: {
    closeAdPopup() {
      this.showAdPopup = false
    },
    handleAdClick() {}
  }
}
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  height: 100%;
  background-color: $uni-bg-color-grey;
}

.content {
  padding: $uni-spacing-row-base;
  margin-top: -50px;
  position: relative;
  z-index: 100;
  background-color: transparent;
  display: flex;
  flex-direction: column;
  gap: $uni-spacing-row-base;
}
</style>
